<template>
  <view
    class="v-price-container"
    :style="{ lineHeight: height, height: height }"
    @click="$emit('click')"
  >
    <view
      v-if="isMinus"
      :style="minusStyle"
    >
      -
    </view>
    <view
      class="unit-sign"
      :style="signStyle"
    >
      ￥
    </view>
    <view
      class="v-price"
      :style="contentStyle"
    >
      <text :style="integerStyle">
        {{ `${integer}${decimal ? '.' : ''}` }}
      </text>
      <text :style="decimalStyle">
        {{ decimal }}
      </text>
    </view>
  </view>
</template>

<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    size?: string;
    decimalSize?: string;
    decimalBold?: boolean;
    signSize?: string;
    sigBold?: boolean;
    height?: string;
    color?: string;
    price?: number | string;
    bold?: boolean;
    comma?: boolean;
    keepDecimal?: boolean;
  }>(),
  {
    size: '28rpx',
    decimalSize: undefined,
    decimalBold: undefined,
    signSize: undefined,
    sigBold: false,
    height: undefined,
    color: '#ff2f3b',
    price: undefined,
    bold: true,
    comma: false,
    keepDecimal: true
  }
);

interface Emits {
  (event: 'click'): void;
}
defineEmits<Emits>();

const minusStyle = computed(() => {
  const fontSize = `font-size: ${props.size}; white-space: nowrap`;
  return `${fontSize}; color: ${props.color}`;
});
const signStyle = computed(() => {
  const fontSize = props.signSize
    ? `font-size: ${props.signSize}`
    : `font-size: calc(${props.size} - 4rpx)`;
  const fontWeight = (props.sigBold ?? props.bold) ? ';font-weight: bold' : '';
  return `${fontSize}; color: ${props.color}${fontWeight}`;
});
const integer = computed(() => {
  if (props.price === undefined || props.price === null) return '0';
  const num =
    typeof props.price === 'string' ? parseFloat(props.price) : props.price;
  if (isNaN(num)) return '0';
  const list = num.toFixed(2)?.split?.('.');
  const string = list?.[0] ?? '0';
  if (props.comma) {
    return string.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
  } else {
    return string.replace(/^-/, '');
  }
});
const isMinus = computed(() => {
  if (props.price === undefined || props.price === null) return false;
  const num =
    typeof props.price === 'string' ? parseFloat(props.price) : props.price;
  return num < 0;
});
const decimal = computed(() => {
  if (props.price === undefined || props.price === null) return '00';
  const num =
    typeof props.price === 'string' ? parseFloat(props.price) : props.price;
  const list = num.toFixed(2)?.split?.('.');
  let str = list?.[1] ?? '00';
  if (props.keepDecimal) return str;
  str = str.replace(/0+$/, '');
  return str;
});
const contentStyle = computed(() => {
  return `color: ${props.color}`;
});
const integerStyle = computed(() => {
  const fontWeight = props.bold ? ';font-weight: bold' : '';
  return `font-size: ${props.size}; white-space: nowrap;${fontWeight}`;
});
const decimalStyle = computed(() => {
  const fontWeight = (props.decimalBold ?? props.bold) ? ';font-weight: bold' : '';
  if (props.decimalSize) {
    return `font-size: ${props.decimalSize}; white-space: nowrap;${fontWeight}`;
  }
  return `font-size: calc(${props.size} - 4rpx); white-space: nowrap;${fontWeight}`;
});
</script>

<style lang="scss" scoped>
.unit-sign {
  margin: 0 -2rpx;
}
.v-price-container {
  display: flex;
  align-items: baseline;
}
.v-price {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  white-space: nowrap;
}
</style>
